<p-dialog [(visible)]="display" [contentStyle]="{'min-width':'100px'}">
    <p-header>
      {{'Password Reset'|translate}}
    </p-header>
    <div *ngIf="newPassword1 !== newPassword2">
      <div class="alert alert-danger" role="alert">
       {{'password not matched!'| translate}} 
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">{{'NEW PASSWORD'|translate}}</div>
      <div class="col-md-8"><input type="password" pPassword [(ngModel)]="newPassword1" placeholder="{{'new password'|translate}}" /></div>
      
     </div>
    <div class="row">
        <div class="col-md-4">{{'REPEAT'|translate}}</div>
        <div class="col-md-8"><input type="password" pPassword [(ngModel)]="newPassword2" placeholder="{{'confirm password'|translate}}" /></div>
      
    </div>
    <p-footer>
      <p-button label="{{'RESET'|translate}}" (onClick)="resetPassword()" iconPos="left" *ngIf="newPassword1 !== ''"></p-button>
    </p-footer>
  </p-dialog>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-shrink" id="mainNav">
  <div class="container">
    <a class="navbar-brand" rel="home" href="#" title="iPAN">
      <img style="max-width:100px; margin-top: 1 px;" src="/assets/img/defaultLogo.png">
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
      aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        {{ 'Menu'| translate }}
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav  ml-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['shared/customer-property-grid',user.id]">{{'ALL PROPERTIES'|translate}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['shared/customer-property-management-grid',user.id]">{{'PROPERTIES UNDER MANAGEMENT'|translate}}</a>
        </li>
        <li class="nav-item dropdown" ngbDropdown>
          <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
              <i class="fa fa-language"></i> {{ 'Language' | translate }}
              <b class="caret"></b>
          </a>
          <div class="dropdown-menu-right" ngbDropdownMenu>
              <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('en')">
                  <span class="flag-icon flag-icon-au"></span>English
              </a>
              <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('zh')">
                  <span class="flag-icon flag-icon-cn"></span>中文
              </a>
          </div>
      </li> 
        <li class="nav-item dropdown" ngbDropdown>
          <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
            <i class="fa fa-user"></i> {{user.code}} ({{'CUSTOMER'|translate}})
            <b class="caret"></b>
          </a>
          <div class="dropdown-menu-right" ngbDropdownMenu>
            <a class="dropdown-item" href="javascript:void(0)" (click)="display=true;">
              <i class="fa fa-fw fa-key"></i> {{'RESET'|translate}}
            </a>
            <a class="dropdown-item" href="javascript:void(0)" (click)="onLoggedout()">
              <i class="fa fa-fw fa-power-off"></i> {{'LOGOUT'|translate}}
            </a>
          </div>
        </li>

      </ul>
    </div>
  </div>
</nav>

<!-- Header -->
<header class="masthead">
  <div class="container">
    <div class="intro-text">
      <h1 class="text-white"  style="padding-top: 20px;">{{'iPAN'|translate}}</h1>
      <!-- <div class="">gives you access to the latest developments</div> -->
      <!-- <a class="btn btn-primary btn-xl text-uppercase" >Tell Me More</a> -->
    </div>
  </div>
</header>
<section>
  <router-outlet></router-outlet>
</section>




<!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-5">

      </div>

      <div class="col-md-4">
        <span class="copyright">{{'Copyright'|translate}} &copy; iPAN 2018</span>
      </div>
    </div>
  </div>
</footer>